<html>
    <head>
        <title>篮球社团管理 - 社团管理</title>
        <meta name="keywords" content="篮球,社团,管理系统,社">
        <meta name="description" content="高校篮球社团管理系统，计算机等相关的技术，将各社员与学校管理联系起来实现即时信息通讯，为老师学生节约了大量的时间与精力，并大大提高了学校管理工作的效率与质量，同时精简了学校的管理机构。">

        <link rel="shortcut icon" href="/static/favicon.ico">
        <link rel="stylesheet" href="/static/layui/css/layui.css">
    </head>
    <body>
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">修改社团资料</li>
                <li>社团成员管理</li>
                <li>社团活动管理</li>
                <li>社团新闻管理</li>
            </ul>
            <div class="layui-tab-content">
                <!-- 修改社团资料部分 -->
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">社团名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="cname" required value="${club.cname}" lay-verify="required" placeholder="请输入社团名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">社团介绍</label>
                            <div class="layui-input-block">
                                <textarea name="introduce" placeholder="请输入内容" class="layui-textarea">${club.introduce}</textarea>
                            </div>
                        </div>
                        <input type="hidden" name="cid" value="${club.cid}" />
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 修改社团资料结束 -->
                <!-- 成员管理部分 -->
                <div class="layui-tab-item">
                    <table class="layui-table" id="members_table" lay-filter="test"></table>
                </div>
                <!-- 成员管理部分结束 -->
                <!-- 社团活动管理部分 -->
                <div class="layui-tab-item">
                    <table class="layui-table" id="activity_table" lay-filter="activity"></table>
                </div>
                <!-- 社团活动管理结束 -->
                <!-- 社团新闻管理部分 -->
                <div class="layui-tab-item">
                    <table class="layui-table" id="news_table" lay-filter="news"></table>
                </div>
                <!-- 社团新闻管理结束 -->
            </div>
        </div>

        <!-- 成员管理相关 -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
                <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
                <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新</button>
            </div>
        </script>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <!-- 活动管理相关 -->
        <script type="text/html" id="toolbarActivity">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">申请</button>
                <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
                <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新</button>
            </div>
        </script>
        <script type="text/html" id="barActivity">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <!-- 新闻管理相关 -->
        <script type="text/html" id="toolbarNews">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">发布</button>
                <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
                <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新</button>
            </div>
        </script>
        <script type="text/html" id="barNews">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <script src="/static/layui/layui.js"></script>
        <script src="/static/js/jquery.min.js"></script>
        <!-- 修改社团资料表单 -->
        <script>
            //Demo
            layui.use('form', function(){
                var form = layui.form;
                //监听提交
                form.on('submit(formDemo)', function(data){
                    console.log(data.field)
                    console.log(data.form)
                    // console.log(data.form)
                    $.ajax({
                        url:"/updateClub",
                        data: data.field,
                        success:function(res){
                            layer.msg(res.msg);
                        }
                    })
                    return false;
                });
            });
        </script>
        <!-- 成员管理相关 -->
        <script>
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function(){
                var element = layui.element;
            });
            layui.use('table', function(){
                var table = layui.table;
                //执行渲染
                //第一个实例
                var tableIns = table.render({
                    elem: '#members_table'
                    ,height: 500
                    ,url: '/clubMember?cid=#{club.cid}' //数据接口
                    ,parseData: function(res) { //res 即为原始返回的数据
                        return {
                            "code": 0, //解析接口状态
                            "msg": "", //解析提示文本
                            "count": res.length, //解析数据长度
                            "data": res //解析数据列表
                        }}
                    ,page: true //开启分页
                    ,toolbar: '#toolbarDemo'
                    ,cols: [[ //表头
                        {type:'checkbox', fixed: 'left'}
                        ,{field: 'uid', title: 'ID', width:80, sort: true, fixed: 'left'}
                        ,{field: 'username', title: '学号', width:100, sort:true}
                        ,{field: 'uname', title: '姓名', width:100, sort: true}
                        ,{field: 'gender', title: '性别', width:100}
                        ,{field: 'class_', title: '班级', width:100}
                        ,{field: 'department', title: '学院', width: 180}
                        ,{field: 'type', title: '成员类型', width: 80}
                        ,{field: 'qq', title: 'QQ', width: 120}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                    ]]
                });
                //头工具栏事件
                table.on('toolbar(test)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                        case 'add':
                            layer.prompt({
                                formType: 2
                                ,title: '请输入学号'
                                ,value: ''
                            }, function(value, index){
                                console.log(obj)
                                $.ajax({
                                    url:'/addMember?username=' + value + '&cid=#{club.cid}',
                                    success:function(res){
                                        layer.msg(res.msg)
                                        tableIns.reload()
                                        layer.close(index);
                                    }
                                })
                            });
                            break;
                        case 'delete':
                            var data = [];
                            for(var i = 0;i < checkStatus.data.length;i++){
                                data.push(checkStatus.data[i].uid)
                            }
                            layer.confirm('确定删除这' + checkStatus.data.length + '位成员吗？',function(index){
                                $.ajax({
                                    type: 'post',
                                    url:'/deleteMember',
                                    traditional:true,
                                    data:{
                                        uids:data
                                    },
                                    success: function(res){
                                        console.log(res)
                                        tableIns.reload()
                                        layer.close(index)
                                    }
                                })
                            })
                            break;
                        case 'refresh':
                            tableIns.reload()
                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：'+ data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选': '未全选');
                            break;

                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    };
                });
                //监听行工具事件
                table.on('tool(test)', function(obj){
                    var data = obj.data;
                    console.log(obj)
                    if(obj.event === 'del'){
                        layer.confirm('确定删除该成员吗？', function(index){
                            $.ajax({
                                type: 'post',
                                url:'/deleteMember',
                                traditional:true,
                                data:{
                                    uids:[obj.data.uid]
                                },
                                success: function(res){
                                    console.log(res)
                                    obj.del()
                                }
                            })
                            layer.close(index);
                        });
                    } else if(obj.event === 'edit'){
                        layer.prompt({
                            formType: 2
                            ,value: data.email
                        }, function(value, index){
                            obj.update({
                                email: value
                            });
                            layer.close(index);
                        });
                    }
                });
            })
        </script>
        <!-- 活动管理相关 -->
        <script>
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function(){
                var element = layui.element;
            });
            layui.use('table', function(){
                var table = layui.table;
                //执行渲染
                //第二个实例
                var tableIns2 = table.render({
                    elem: '#activity_table'
                    ,height: 500
                    ,url: '/selectActivityByClub?cid=#{club.cid}' //数据接口
                    ,parseData: function(res) { //res 即为原始返回的数据
                        var status = ['待审核','审核通过','进行中','已结束']
                        status['-1'] = '未通过'
                        for(var i = 0;i < res.length;i++){
                            res[i].status = status[res[i].status];
                        }
                        return {
                            "code": 0, //解析接口状态
                            "msg": "", //解析提示文本
                            "count": res.length, //解析数据长度
                            "data": res //解析数据列表
                        }}
                    ,page: true //开启分页
                    ,toolbar: '#toolbarActivity'
                    ,cols: [[ //表头
                        {type:'checkbox', fixed: 'left'}
                        ,{field: 'aid', title: 'ID', width:80, sort: true, fixed: 'left'}
                        ,{field: 'aname', title: '活动名称', width:100, sort:true}
                        ,{field: 'acontent', title: '活动内容', width:100, sort: true}
                        ,{field: 'time', title: '活动时间', width:150}
                        ,{field: 'duration', title: '持续时间', width:100}
                        ,{field: 'site', title: '活动地点', width:100}
                        ,{field: 'status', title: '状态', width: 180}
                        ,{field: 'member_count', title: '参与人数', width: 100}
                        ,{fixed: 'right', title:'操作', toolbar: '#barActivity', width:150}
                    ]]
                });
                //头工具栏事件
                table.on('toolbar(activity)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                        case 'add':
                            //页面层
                            layer.open({
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['420px', '500px'], //宽高
                                title: '添加活动',
                                content:
                                    '        <form class="layui-form" action="/addActivity">\n' +
                                    '            <div class="layui-form-item">\n' +
                                    '                <label class="layui-form-label">活动名称</label>\n' +
                                    '                <div class="layui-input-block">\n' +
                                    '                    <input type="text" name="aname" required  lay-verify="required" placeholder="请输入活动名称" autocomplete="off" class="layui-input" style="margin-top: 20px;">\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '            <div class="layui-form-item layui-form-text">\n' +
                                    '                <label class="layui-form-label">活动内容</label>\n' +
                                    '                <div class="layui-input-block">\n' +
                                    '                    <textarea name="acontent" placeholder="请输入活动内容" class="layui-textarea"></textarea>\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '            <div class="layui-form-item">\n' +
                                    '                <label class="layui-form-label">活动地点</label>\n' +
                                    '                <div class="layui-input-block">\n' +
                                    '                    <input type="text" name="site" required  lay-verify="required" placeholder="请输入活动地点" autocomplete="off" class="layui-input">\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '            <div class="layui-form-item">\n' +
                                    '                <label class="layui-form-label">活动时间</label>\n' +
                                    '                <div class="layui-input-block">\n' +
                                    '                    <input id="activityTime" type="text" name="time" required  lay-verify="required" placeholder="格式：2020-01-01 12:00" autocomplete="off" class="layui-input">\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '            <div class="layui-form-item">\n' +
                                    '                <label class="layui-form-label">占用时间</label>\n' +
                                    '                <div class="layui-input-block">\n' +
                                    '                    <input type="text" name="duration" required  lay-verify="required" placeholder="请输入活动需要持续的时间" autocomplete="off" class="layui-input">\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '            <div class="layui-form-item">\n' +
                                    '                <div class="layui-input-block" style="margin-top:20px;">\n' +
                                    '                    <button class="layui-btn" lay-submit lay-filter="activityApply">立即申请</button>\n' +
                                    '                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '        </form>'
                            });
                            break;
                        case 'delete':
                            var data = [];
                            for(var i = 0;i < checkStatus.data.length;i++){
                                data.push(checkStatus.data[i].aid)
                            }
                            layer.confirm('确定删除这' + checkStatus.data.length + '个活动吗？',function(index){
                                $.ajax({
                                    type: 'post',
                                    url:'/deleteActivity',
                                    traditional:true,
                                    data:{
                                        uids:data
                                    },
                                    success: function(res){
                                        console.log(res)
                                        tableIns2.reload()
                                        layer.close(index)
                                    }
                                })
                            })
                            break;
                        case 'refresh':
                            tableIns2.reload()
                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：'+ data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选': '未全选');
                            break;

                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    };
                });
                //监听行工具事件
                table.on('tool(activity)', function(obj){
                    var data = obj.data;
                    console.log(obj)
                    if(obj.event === 'del'){
                        layer.confirm('当前' + obj.data.member_count + '人报名，确定删除该活动吗？', function(index){
                            $.ajax({
                                type: 'post',
                                url:'/deleteActivity',
                                traditional:true,
                                data:{
                                    aids:[obj.data.aid]
                                },
                                success: function(res){
                                    console.log(res)
                                    obj.del()
                                }
                            })
                            layer.close(index);
                        });
                    } else if(obj.event === 'edit'){
                        alert("编辑")
                        // layer.prompt({
                        //     formType: 2
                        //     ,value: data.email
                        // }, function(value, index){
                        //     obj.update({
                        //         email: value
                        //     });
                        //     layer.close(index);
                        // });
                    }
                });
            })
        </script>
        <!-- 表单提交事件 -->
        <script>
            //Demo
            layui.use('form', function(){
                var form = layui.form;
                //监听提交
                form.on('submit', function(data){
                    console.log(data.field)
                    console.log(data.form.action)
                    $.ajax({
                        url:data.form.action,
                        data: data.field,
                        success:function(res){
                            layer.msg(res.msg);
                        }
                    })
                    return false;
                });
            });
        </script>
        <!-- 新闻管理相关 -->
        <script>
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function(){
                var element = layui.element;
            });
            layui.use('table', function(){
                var table = layui.table;
                //执行渲染
                //第三个实例
                var tableIns3 = table.render({
                    elem: '#news_table'
                    ,height: 500
                    ,url: '/getNewsListByClub?cid=#{club.cid}' //数据接口
                    ,parseData: function(res) { //res 即为原始返回的数据
                        for(var i = 0;i < res.length;i++){
                            res[i].uname = res[i].author.uname;
                            res[i].title = '<a href="/article?nid=' + res[i].nid + '">' + res[i].title + '</a>'
                        }
                        return {
                            "code": 0, //解析接口状态
                            "msg": "", //解析提示文本
                            "count": res.length, //解析数据长度
                            "data": res //解析数据列表
                        }}
                    ,page: true //开启分页
                    ,toolbar: '#toolbarNews'
                    ,cols: [[ //表头
                        {type:'checkbox', fixed: 'left'}
                        ,{field: 'nid', title: 'ID', width:80, sort: true, fixed: 'left'}
                        ,{field: 'title', title: '标题', width:100, sort:true}
                        ,{field: 'uname', title: '作者', width:150}
                        ,{field: 'time', title: '发布时间', width:150}
                    ]]
                });
                //头工具栏事件
                table.on('toolbar(news)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                        case 'add':
                            window.open("/addNews")
                            break;
                        case 'delete':
                            var data = [];
                            for(var i = 0;i < checkStatus.data.length;i++){
                                data.push(checkStatus.data[i].nid)
                            }
                            layer.confirm('确定删除这' + checkStatus.data.length + '个新闻吗？',function(index){
                                $.ajax({
                                    type: 'post',
                                    url:'/deleteNews',
                                    traditional:true,
                                    data:{
                                        nids:data
                                    },
                                    success: function(res){
                                        console.log(res)
                                        tableIns3.reload()
                                        layer.close(index)
                                    }
                                })
                            })
                            break;
                        case 'refresh':
                            tableIns3.reload()
                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：'+ data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选': '未全选');
                            break;

                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    };
                });
                //监听行工具事件
                table.on('tool(news)', function(obj){
                    var data = obj.data;
                    console.log(obj)
                    if(obj.event === 'del'){
                        layer.confirm('确定删除该新闻吗？', function(index){
                            $.ajax({
                                type: 'post',
                                url:'/deleteNews',
                                traditional:true,
                                data:{
                                    aids:[obj.data.nid]
                                },
                                success: function(res){
                                    console.log(res)
                                    obj.del()
                                }
                            })
                            layer.close(index);
                        });
                    } else if(obj.event === 'edit'){
                        alert("编辑")
                        // layer.prompt({
                        //     formType: 2
                        //     ,value: data.email
                        // }, function(value, index){
                        //     obj.update({
                        //         email: value
                        //     });
                        //     layer.close(index);
                        // });
                    }
                });
            })
        </script>
    </body>
</html>